<template>
  <div>
    <Card title="提问">
      <Form label-position="top" :model="form">
        <FormItem prop="title" label="标题">
          <Input type="text" v-model="form.caption" placeholder="请输入标题" />
        </FormItem>
        <FormItem prop="category" label="类别">
          <Select v-model="form.category_id" placeholder="请选择类别">
            <Option v-for="category of category_list" :value="category.id">{{ category.name }}</Option>
          </Select>
        </FormItem>
        <FormItem prop="centent" label="内容">
          <Input type="textarea" v-model="form.centent" placeholder="请输入内容" />
        </FormItem>
        <Button type="primary" @click="submit">提交</Button>
      </Form>
    </Card>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "Ask",
  data() {
    return {
      form: {
        caption: "",
        category_id: 1,
        content: ""
      }
    };
  },
  created() {
    this.fetchCategoryList();
  },
  methods: {
    async submit() {
      axios.post("/api/ask/submit", this.form).then(res => {
        console.log(res);
        if (res.status != 200) {
          this.$Message.error("提问失败，网络错误");
          return;
        }
        if (res.data.code === 0) {
          this.$Message.success("提问成功");
          this.$router.push("/");
        } else {
          console.log(res.data.message);
          this.$Message.error(res.data.message);
        }
      });
    },
    fetchCategoryList() {
      this.category_list = [{ id: 1, name: "技术" }];
      let vm = this;
      axios.get("/api/category/list").then(res => {
        console.log(res);
        if (res.status != 200) {
          vm.$Message.error("服务繁忙，请稍后重试");
          return;
        }
        if (res.data.code === 0) {
          console.log(res.data.data);
          vm.category_list = res.data.data;
        } else {
          vm.$Message.error(res.data.message);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
</style>
